import * as React from "react"
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native"
import { px2dp } from "@/utils"
import { color } from "@/theme"
import { images } from "@/assets"

interface HomeItemViewInterface {
  data?: any
}

const styles = StyleSheet.create({
  collection: {
    height: px2dp(16),
    marginLeft: px2dp(28),
    width: px2dp(12)
  },

  container: {
    alignItems: "center",
    flex: 1,
    flexDirection: "row"
  },
  guestLogo: {
    height: px2dp(37),
    width: px2dp(37)
  },
  guestScore: {
    color: color.palette.red,
    fontFamily: "DINAlternate-Bold",
    fontSize: 16,
    textAlign: "left"
  },

  guestTeam: {
    color: color.palette.subtitle,
    fontFamily: "PingFangSC-Semibold",
    fontSize: 12,
    textAlign: "left"
  },

  homeLogo: {
    height: px2dp(37),
    marginEnd: px2dp(-10),
    width: px2dp(37)
  },

  homeScore: {
    color: color.palette.red,
    fontFamily: "DINAlternate-Bold",
    fontSize: 16,
    textAlign: "left"
  },

  homeTeam: {
    color: color.palette.subtitle,
    fontFamily: "PingFangSC-Semibold",
    fontSize: 12,
    textAlign: "left",
    width: px2dp(80)
  },
  itemContainer: {
    backgroundColor: color.palette.white,
    height: px2dp(90.5)
  },

  leagueName: {
    color: color.palette.textGray,
    fontSize: 12,
    marginLeft: px2dp(28),
    marginTop: px2dp(10)
  },

  lineView: {
    backgroundColor: "#ECECEC",
    height: px2dp(32),
    marginLeft: px2dp(25),
    width: px2dp(1)
  },
  time1: {
    color: color.palette.red,
    fontFamily: "DINAlternate-Bold",
    fontSize: 12,
    textAlign: "left"
  },
  time2: {
    color: color.palette.red,
    fontFamily: "DINAlternate-Bold",
    fontSize: 12,
    textAlign: "left"
  }
})
export default class HomeItemView extends React.Component<HomeItemViewInterface, {}> {
  render() {
    return (
      <TouchableOpacity>
        <View style={styles.itemContainer}>
          <Text style={styles.leagueName}>泰国超级联赛</Text>
          <View style={styles.container}>
            <Image style={styles.collection} source={images.home.collected} />
            <View
              style={{
                flexDirection: "row",
                flex: 1,
                alignItems: "center",
                justifyContent: "center",
                marginStart: px2dp(10)
              }}
            >
              <Image style={[styles.homeLogo]} source={images.sport.index.defalutTeamLogo} />
              <Image style={styles.guestLogo} source={images.sport.index.defalutTeamLogo} />
            </View>
            <View style={{ flex: 1 }}>
              <Text style={styles.homeTeam}>皇家马德里</Text>
              <Text style={styles.guestTeam}>巴塞罗那</Text>
            </View>
            <View style={{ flex: 0.4, alignItems: "center", justifyContent: "center" }}>
              <Text style={styles.homeScore}>6</Text>
              <Text style={styles.guestScore}>3</Text>
            </View>
            <View style={styles.lineView} />
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
              <Text style={styles.time1}>14:00</Text>
              <Text style={styles.time2}>上半场</Text>
            </View>
          </View>
          <View
            style={{
              backgroundColor: color.palette.bgMain,
              height: px2dp(1),
              marginStart: px2dp(13),
              marginEnd: px2dp(13)
            }}
          />
        </View>
      </TouchableOpacity>
    )
  }
}
